<!DOCTYPE html>
<uieip type="page" value="login" debug="true" timeout="5000"></uieip>
<uieip type="reg" value="console"></uieip>

<html>

<head>
    <uieip type="file" value="inc" src="/yqwin/easyui/include.txt" cache="true" minute="1440"></uieip>
    <uieip type="file" value="css" src="/yqwin/css/yqwin.min" cache="false"></uieip>
    <uieip type="file" value="js" src="/yqwin/src/yqwin.min" cache="false"></uieip>
    <title>Data Edit</title>
    <style>
        body {
            margin: 0;
        }

        table {
            border-spacing: 0px;
        }
    </style>
</head>

<body>
    <div style="margin:3px 0 3px 3px;overflow:hidden;">
        <select id="cg_db" style="width: 300px;"></select>
    </div>

    <div id="tab_db" data-options="'border':false,'tabPosition':'bottom'" class="easyui-tabs"
        style="width:100%;height:250px;margin: 0px;">
        <div title="表" data-options="iconCls:'fa fa-table'" style="padding:0px;display:none;">
            <ul id="tt">
            </ul>
        </div>
        <div title="数据库关系图" data-options="iconCls:'fa fa-usb'" style="padding:0px;display:none;">
            <table id="tb_diagram"></table>
        </div>
    </div>
    <script>
        $(function () {
            main_fun.db_init()
        });

        var page_fun = {
            select: 0,
            init() {
                $(window).resize(function () {
                    page_fun.onresize();
                });
                page_fun.onresize();

                $("#tab_db").tabs("options").onSelect = function (title, index) {
                    page_fun.select = index;
                    if (index == 1) {
                        diagram_fun.select();
                    }
                }

                var options = {
                    ajaxUrl: "_db.html"
                };

                $.yqDbList(options, function (data) {
                    if (data.error == 0) {
                        main_fun.db_setData(data);
                    }
                });
            },
            onresize() {
                var w = window.innerWidth;
                var h = window.innerHeight;

                main_fun.db_resize({
                    width: w - 7
                });

                $('#tab_db').tabs("resize", {
                    width: w,
                    height: h - 36
                });

                if (page_fun.select == 0) {
                    main_fun.tree_resize({
                        width: w - 1,
                        height: h - 70
                    });
                } else if (page_fun.select == 1) {
                    diagram_fun.resize({
                        width: w,
                        height: h - 70
                    });
                }
            }
        }

        var main_fun = {
            db_id: "cg_db",
            db_init() {
                $("#" + this.db_id).yqComboGrid({
                    titles: [{
                        "name": "name",
                        "ui_title": "名称",
                        "ui_type": 2,
                        "ui_width": 70,
                        "ui_visible": true,
                        "ui_readonly": false,
                        "ui_mask": {
                        }
                    }, {
                        "name": "describe",
                        "ui_title": "描述",
                        "ui_type": 2,
                        "ui_width": 120,
                        "ui_visible": true,
                        "ui_readonly": false,
                        "ui_mask": {
                        }
                    }, {
                        "name": "db_type",
                        "ui_title": "类型",
                        "ui_type": 2,
                        "ui_width": 80,
                        "ui_visible": true,
                        "ui_readonly": false,
                        "ui_mask": {
                        }
                    }],

                    keyId: "name",                      //关键字段
                    displayMember: "{describe}[{name}-{db_type}]",          //显示字段
                    loadData: false,
                    isEdit: false, //可编辑
                    isSeek: false,

                    isPage: false,                   //分页

                    afterBindingTitle: function () { //标题绑定后
                        main_fun.tree_init();
                    }, 

                    onChange: function (newValue, newRow, oldValue, oldRow) {
                        main_fun.db_onChange(newValue);
                    },
                });
            },
            db_setData(data) {
                $("#" + this.db_id).yqComboGrid("setData", data);
            },
            db_resize(res) {
                $("#" + this.db_id).yqComboGrid("resize", res);
            },
            db_onChange(newValue) {
                if (newValue == null) {
                    $('#' + this.tree_id).yqTree("clear");

                    diagram_fun.dbname = null;
                }
                else {
                    $('#' + this.tree_id).yqTree("options").dbname = newValue;
                    $('#' + this.tree_id).yqTree("loadData");

                    diagram_fun.dbname = newValue;
                }

                if (page_fun.select == 1) {
                    diagram_fun.select();
                }
            },

            tree_id: "tt",
            tree_init() {
                $('#' + this.tree_id).yqTree({
                    ajaxUrl: "/_db.html", //ajax地址
                    dbname: "yqbase",   //数据库
                    tbname: "sys_tb",    //表
                    keyId: "sid",       //关键字段
                    bindingKeyId: null,
                    bindingValue: null,
                    pKeyId: "pid",
                    pKeyValue: null,

                    loadDataType: 2,    //全局加载模式
                    displayMember: "describe",
                    loadData: false,

                    menuType: 3,  //1-顶部菜单，2-右键菜单，3-顶部+右键  其他，无菜单

                    overflowY: true,

                    editMode: 2,   //1,2-弹出编辑模态窗体 
                    editModeW: 600, //模态编辑器宽度 格式为 800（数字） 
                    editModeH: 450, //模态编辑器高度 格式为 600（数字） 
                    editModeNo: -1, //编辑模板

                    formatter: function (node) {
                        var text = node.text;
                        if (node.attributes == 0) {
                            if (!(node.attributes.describe === undefined ||
                                node.attributes.describe === null)) {
                                text = node.attributes.describe;
                            } else if (!(node.attributes.name === undefined ||
                                node.attributes.name === null)) {
                                text = node.attributes.name;
                            } else {
                                text = "未命名";
                            }
                        } else {
                            text = "";
                            if (!(node.attributes.describe === undefined ||
                                node.attributes.describe === null)) {
                                text = node.attributes.describe;
                            }
                            if (!(node.attributes.name === undefined ||
                                node.attributes.name === null)) {
                                text += "[" + node.attributes.name + "]";
                            }
                            if (text == "") {
                                text = "未命名";
                            }
                        }
                        return text;
                    },

                    beforeBindingTitle: function (titles, callback) {//标题绑定前
                        callback(titles);
                    }, 
                    afterBindingTitle: function () { //标题绑定后
                        page_fun.init();
                    },

                    beforeSetdata: function (data, callback) {//绑定数据之前
                        callback(data)
                    }, 
                    afterSetdata: function (data) { //绑定数据之后
                        //console.log("afterSetdata", data);
                    },
                    editLinks: [{}, {
                        id: "proc2",
                        text: "存储过程",
                        iconCls: "fa fa-code",
                    }],
                    editMenus: [{}, {
                        id: "link",
                        text: "字段设置",
                        iconCls: "fa fa-table",
                    }, {
                        id: "proc",
                        text: "存储过程",
                        iconCls: "fa fa-code",
                    }],
                    uppActionState: function (s_node, callback) {
                        var tb_type = 0;
                        if (s_node != null) {
                            tb_type = s_node.attributes["tb_type"];
                            if (tb_type === undefined || tb_type == null) {
                                tb_type = 0;
                            }
                        }

                        if ($("#" + main_fun.db_id).yqComboGrid("getSelected") === null) {
                            $(this).yqTree("btnDisable", "addroot");
                        } else {
                            $(this).yqTree("btnEnable", "addroot");
                        }

                        if (tb_type == 1) {
                            $(this).yqTree("btnEnable", "link");
                            var db_row = $("#" + main_fun.db_id).yqComboGrid("getSelected");
                            if (db_row.db_type == "sqlite") {
                                $(this).yqTree("btnDisable", "proc");
                                $(this).yqTree("btnDisable", "proc2");
                            } else {
                                $(this).yqTree("btnEnable", "proc");
                                $(this).yqTree("btnEnable", "proc2");
                            }
                        } else {
                            $(this).yqTree("btnDisable", "link");
                            $(this).yqTree("btnDisable", "proc");
                            $(this).yqTree("btnDisable", "proc2");
                        }

                        callback(true);
                    },
                    btnAction: function (action, params, callback) {
                        if (action == "link") {
                            var node = $(this).yqTree("getSelected");
                            if (node != null) {
                                main_fun.treeDblClick(node);
                            }
                            callback(false);
                        } else if (action == "proc" || action == "proc2") {
                            var node = $(this).yqTree("getSelected");
                            if (node != null) {
                                main_fun.procEdit(node);
                            }
                            callback(false);
                        } else {
                            callback(true);
                        }
                    },

                    onDblClick: function (node) {
                        if (node == null) {
                            return;
                        }

                        main_fun.treeDblClick(node);
                    },
                });
            },
            treeDblClick(node) {
                var p_iframenum = $.yqFormMdi_fun("num");

                if (node.attributes["tb_type"] == 1) {
                    var opt = $('#' + main_fun.tree_id).yqTree("options");
                    $.yqFormMdi_fun("editwin", {
                        id: node.attributes["sid"],
                        title: node.attributes["name"],
                        openmore: false,
                        content: '',
                        url: "/adp/Fields.html?p_iframenum=" + p_iframenum + "&dbname=" + opt.dbname + "&tbname=" + node.attributes["name"] + "&tb_id=" + node.attributes["sid"],
                        closable: true,
                        iconCls: "fa fa-table"
                    });
                }
            },
            tree_resize(res) {
                $('#' + this.tree_id).yqTree("resize", res);
            },

            //存储过程编辑
            procEdit(node) {
                if (node.attributes["tb_type"] == 1) {
                    var p_iframenum = $.yqFormMdi_fun("num");

                    var opt = $('#' + main_fun.tree_id).yqTree("options");
                    $.yqFormMdi_fun("editwin", {
                        id: "_" + node.attributes["sid"],
                        title: node.attributes["name"] + "_action",
                        openmore: false,
                        content: '',
                        url: "/adp/Data_Proc.html?p_iframenum=" + p_iframenum + "&dbname=" + opt.dbname + "&tbname=" + node.attributes["name"] + "&tb_id=" + node.attributes["sid"],
                        closable: true,
                        iconCls: "fa fa-code"
                    });
                }
            }
        }

        var diagram_fun = {
            id: "tb_diagram",
            init: false,
            running: false,
            dbname: null,
            select() {
                if (this.running) {
                    return;
                }
                this.running = true;

                if (this.init) {
                    this.loadData();
                    return;
                }
                this.init = true;

                $("#" + this.id).yqDataGrid({
                    ajaxUrl: "/_db.html",
                    dbname: (this.dbname === null ? "yqbase" : this.dbname),
                    tbname: "sys_tb_diagram",
                    keyId: "sid",
                    order: "queue",
                    tempno: 1,
                    editMode: 3,
                    editModeW: 600,
                    editModeH: 450,
                    editModeNo: 1,
                    loadData: false,
                    isPage: false,
                    isEdit: true,
                    copy: false,
                    add: true,
                    upp: true,
                    del: true,
                    move: true,
                    isSimple: false,
                    isSeek: false,

                    linkField: ["describe"],    //连接字段
                    linkBlank: "[link]", //空连接显示
                    afterBindingTitle: function () {
                        diagram_fun.loadData();
                    },
                    afterSetdata: function (data) {
                        diagram_fun.running = false;
                        this.yqDataGrid("btnEnable", "add");
                    },
                    onBeforeShowEdit: function (titles, action, row, callback) {      //add/upp/move 编辑执行前
                        if (action == "add" || action == "upp") {
                            diagram_fun.editShow(action, row);
                        } else {
                            callback(true, titles, row);
                        }
                    },
                });
            },
            loadData() {
                page_fun.onresize();
                if (this.dbname === null) {
                    $("#" + this.id).yqDataGrid("clear");
                    $("#" + this.id).yqDataGrid("btnDisable", "add");
                    this.running = false;
                } else {
                    $("#" + this.id).yqDataGrid("btnDisable", "add");
                    $("#" + this.id).yqDataGrid("seek", "");
                }
            },
            resize(res) {
                if (!this.init) {
                    return;
                }

                $("#" + this.id).yqDataGrid("resize", res);
            },
            editShow(action, row) {
                var p_iframenum = $.yqFormMdi_fun("num");

                var sid = (action == "add" ? null : row["sid"]);
                var stitle = (action == "add" ? "new diagram" : ((row["describe"] === undefined || row["describe"] === null) ? "[描述]" : row["describe"]));
                $.yqFormMdi_fun("editwin", {
                    id: sid,
                    title: stitle,
                    openmore: false,
                    content: '',
                    url: "/adp/diagram.html?p_iframenum=" + p_iframenum + "&dbname=" + diagram_fun.dbname + (sid === null ? "" : "&sid=" + sid),
                    closable: true,
                    iconCls: "fa fa-usb"
                });
            },
            updateRow(row) {
                if (this.init) {
                    $("#" + this.id).yqDataGrid("updateRow", row);
                }
            },
            appendRow(row) {
                if (this.init) {
                    $("#" + this.id).yqDataGrid("appendRow", row);
                }
            }
        }

        function hello() {
            console.log("data hello.")
        }
    </script>
</body>

</html>